<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Dragon Baby System</title>
		<%@include  file="/commons/head.jsp"%>
		<style>
		#gallery { float: left; } /* IE6 */
		.gallery.custom-state-active { background: #eee; }
		.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
		.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
		.gallery li a { float: right; }
		.gallery li a.ui-icon-zoomin { float: left; }
		.gallery li img { width: 100%; cursor: move; }
		</style>
		<script src="${ctx}/js/fileupload/jquery.fileupload.js"></script>
		<script src="${ctx}/js/fileupload/jquery.fileupload-ui.js"></script>
		<script type="text/javascript">
		$(function() {
			// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
			$("#dialog:ui-dialog").dialog("destroy" );
			$("#dialog-form").dialog({
				autoOpen: false,
				height: 300,
				width: 350,
				modal: true,
				buttons: {
					"Save": function() {
						//$("#dialog-form").
						$.ajax({
							url:"${ctx}/atta/atta!addComment.do",
							data:"id=" + $("#attaId").val() + "&comment=" + $("#comm").val(),
							dataType:"text",
							success: function(text) {
								$("#comm").val("");
								$("#dialog-form").dialog( "close" );
						}});
					},
					Cancel: function() {
						$("#comm").val("");
						$("#dialog-form").dialog( "close" );
					}
				}
			});

			$("a[name = create-tags]").click(function() {
				alert(1);
				$("<div id='dialog-modal'><p>功能待实现</p>").appendTo( "body" ).dialog({
					title: "错误提示",
					modal: true
				});
			});
			
			$("a[name = create-descs]").click(function() {
				$.ajax({
					url:"${ctx}/atta/atta!getComment.do",
					data:"id=" + $(this).attr("value"),
					dataType:"text",
					success: function(text) {
						$("#comm").val(text);
				}});
				$("#attaId").val($(this).attr("value"));
				$( "#dialog-form" ).dialog( "open" );
			});
			var initFileUpload = function (suffix) {
		        $('#file_upload').fileUploadUI({
		            namespace: 'file_upload_' + suffix,
		            fileInputFilter: '#file_' + suffix,
		            dropZone: $('#drop_zone_' + suffix),
		            buildDownloadRow: function (file) {
		            	if(file.img) {
		            		$("#gallery").append("<li class='ui-widget-content ui-corner-tr'><img src='${ctx}/atta/atta!img.do?id=" +  file.id + "' /><a href=\"javascript:viewLargerImage(\'" + file.id + "\');\" title='View larger image' class='ui-icon ui-icon-zoomin'>View larger</a></li> ");
		            	} else {
		            		$( "#uploadMessage" ).append(file.name + file.ext).hide( "pulsate", {}, 500 );
		            	}
		            }
		        });
		    };
		    initFileUpload(1);
		});
		
		function viewLargerImage(fileId) {
			var src = "${ctx}/atta/atta!imgM.do?id=" + fileId,
				title = "图片详细",
				$modal = $( "img[src$='" + src + "']" );
				var img = $( "<img alt='" + title + "' width='600' style='display: none; padding: 8px;' />" )
					.attr( "src", src ).appendTo( "body" );
				setTimeout(function() {
					img.dialog({
						title: title,
						width: 820,
						modal: true
					});
				}, 1 );
		}
		
		function saveName(fileId) {
			$("#fileName" + fileId).attr("disabled", true);
			$.ajax({
				url:"${ctx}/atta/atta!saveName.do",
				data:"id=" + fileId + "&fileName=" + $("#fileName" + fileId).val(),
				dataType:"text",
				success: function(text) {
					$("#fileName" + fileId).show( "pulsate", {}, 500 );
					$("#fileName" + fileId).attr("disabled", false);
			}});
		}
		</script>
	</head>
	<body>
		<div class="wrapper">
			<%@include file="/commons/header.jsp" %>
			<div class="content">
				<%@include file="/commons/menu.jsp" %>
				<div class="primary">
					<h1>附件管理</h1>
					<div id="dialog-form" title="增加注释" >
						<input id="attaId" type="hidden" value=""/>
						<textarea id="comm" style="width:300px;height:170px;"></textarea>
					</div>
					<table cellspacing="0" id="ListTable" style="margin: 10px 0px;">
						<caption>附件列表</caption>
						<thead>
							<tr>
								<th id="playlistPosHead" scope="col">No.</th>
								<th scope="col">名称</th>
								<th scope="col">类型</th>
								<th scope="col">文件大小</th>
								<th scope="col">加入时间</th>
							</tr>
						</thead>
						<tbody>
							<s:iterator status="sts" value="page.result">
								<tr>
									<td align="center">${sts.index + 1}</td>
									<td align="center">
										<input style="float:left;width:160px;" type="text" id="fileName${id}" value="${name}"/>
										<a style="float:left;" href="javascript:saveName('${id}');" title='Save Name' class='ui-icon ui-icon-disk'>Rename</a>
										<s:if test="img">
											<a style="float:left;" href="javascript:viewLargerImage('${id}');" title='Zoom' class='ui-icon ui-icon-zoomin'>Zoom</a>
										</s:if>
										<a style="float:left;" href="atta!down.do?id=${id}" title='DownLoad' class='ui-icon ui-icon-arrowthickstop-1-s'>Download</a>
										<a style="float:left;" href="#" name="create-descs" value="${id}" title="Comment" class="ui-icon ui-icon-comment">Comment</a>
										<a style="float:left;" href="#" name="create-tags" value="${id}" title="Tags" class="ui-icon ui-icon-tag">Tag</a>
										<a style="float:left;" href="atta!delete.do?id=${id}" title="Delete" class="ui-icon ui-icon-trash">Delete</a>
									</td>
									<td align="center"><s:if test="img">图片</s:if><s:else>非图片</s:else></td>
									<td align="center">${size}</td>
									<td align="center"><s:date name="createDate" format="yyyy-MM-dd" /></td>
								</tr>
							</s:iterator>
						</tbody>
						<tfoot>
							<tr><td colspan="5" align="right">
								<ui:page page="${page}" pageNum="10" />
							</td></tr>
						</tfoot>
					</table>
					<fieldset>
						<legend>
							附件上传
						</legend>
						<form id="file_upload" action="/ghtrade/atta/atta!upload.do" method="post" enctype="multipart/form-data">
						    <div id="drop_zone_1">
						        <input id="file_1" type="file" name="file" style="float:left;" multiple />
						    </div>
						    <div style="clearb"></div>
						    <div id="uploadMessage" style="opacity: 0; display: none; background: #00FF66;">保存成功:</div>
						    <div style="clearb"></div>
						    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"></ul>
						</form>
					</fieldset>
				</div>
			</div>
			<%@include file="/commons/footer.jsp" %>
		</div>
	</body>
</html>
